import { defineComponent, ref, toRefs, computed, PropType, Ref } from 'vue';

// scss
import '@src/modules/trigger/components/ProcessNodeChart/style/coditionPopover.scss'
/* utils */
import state from '@src/modules/trigger/view/setting/util/state.js'
/* type */
import type { ProcessNodeListItem } from '@src/modules/trigger/model/interface/index.ts'
import {addNodeTypeEnum} from '@src/modules/trigger/model/type/main.ts'
import {ProcessNodeListType, addNodeType} from '@src/modules/trigger/model/type/main.ts'
type nodeActionTextType = addNodeType;
type nodeExecuteTextType = Exclude<ProcessNodeListType, 'nodeStart' | 'nodeEnd' | 'node'>;
interface actionNode {
    icon: string
    text: string
    type: nodeActionTextType
    isShow: boolean
}

interface executeNode {
    icon: string
    text: string
    type: nodeExecuteTextType
    isShow: boolean
}

export default defineComponent({
    name: 'ConditionPopover',
    props: {
        nodeData: {
            type: Object as PropType<ProcessNodeListItem>,
            default: () => ({})
        }
    },
    emits: ['addNode'],
    setup(props, { emit }) {

        const {nodeData} = toRefs(props)
        const actionTextList = computed(() => {
            return [{
                icon: 'icon-zhihangdongzuo',
                text: '添加执行动作',
                type: addNodeTypeEnum.NODE,
                isShow: true
            }, {
                icon: 'icon-bell1',
                text: '消息通知',
                type: addNodeTypeEnum.MESSAGE,
                isShow: true
            }, {
                icon: 'icon-daimakuai',
                text: '添加代码块',
                type: addNodeTypeEnum.CODE,
                isShow: state.trigger_code_gray
            }]
        }) as Ref<actionNode[]>

        const executeTextList = [{
            icon: 'icon-filter',
            text: '判断条件',
            type: 'condition',
            isShow: true
        }] as executeNode[]

        const showCondition = computed(() => {
            return nodeData.value.type === 'condition-node'
        })

        /**
         * add node handler
         * @param type 
         */
        const conditionListHandler = (type: string) => {
            emit('addNode', type)
        }

        return () => (
            <div class="condition-popover">
                <div class="condition-action">
                    <h1 class="action-title condition-title">添加执行动作</h1>
                    <div class='action-list condition-list'>
                        {
                            actionTextList.value.filter(item => item.isShow).map((item, index) => {
                                return (
                                    <div class="action-item condition-list-item" onClick={() => conditionListHandler(item.type)}>
                                        <span class={'iconfont ' + item.icon}></span>
                                        <span>{item.text}</span>
                                    </div>
                                )
                            })
                        }
                    </div>

                </div>
                {
                    !showCondition.value ? (
                        <div className="condition-execute">
                            <h1 class="execute-title condition-title">添加执行逻辑</h1>
                            <div class="condition-list execute-list">
                                {
                                    executeTextList.map((item, index) => {
                                        return (
                                            <div class="execute-item condition-list-item" onClick={() => conditionListHandler(item.type)}>
                                                <span class={'iconfont ' + item.icon}></span>
                                                <span>{item.text}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    ) : null
                }
                
            </div>
        )
    }
})